<script setup lang='ts'>

import { reactive, ref, onMounted } from 'vue'

defineProps({
  list: {
    type: Array<{
      id: number,
      name: string,
      nums: number
    }>,
    default: () => [{
      name: '余额',
      nums: 0,
      id: 1
    }, {
      name: '优惠券',
      nums: 0,
      id: 2
    }, {
      name: '积分',
      nums: 0,
      id: 3
    }, {
      name: '收藏',
      nums: 0,
      id: 4
    }]
  }
});

</script>

<template>
  <view class="mt-middle-2 pt-middle-2 pb-middle-2 h-150 w-full flex flex-rol justify-between items-center border-solid rounded-md border border-gray-200"
    style="flex: 1fr 1fr 1fr 1fr;"
  >
    <view class="item relative flex flex-col justify-center items-center h-full w-1/4" v-for="item in list" :key="item.id">
      <view class="font-mono text-base">{{ item.nums }}</view>
      <view class="text-sm text-gray-500">{{ item.name }}</view>
    </view>
  </view>
</template>

<style scoped>
  .item + .item::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 80%;
    transform: translateY(-50%);
    background-color: #ccc;
    left: 0;
    top: 50%;
  }
</style>